<template>
	<view class="container">
		<!-- 头像 -->
		<view class="avatar-container">
			<u-avatar class="avatar" :src="fixedAvatar" size="100"></u-avatar>
		</view>

		<!-- 用户名 -->
		<view class="username-container">
			<u-icon name="account" size="28" color="#666" class="username-icon"></u-icon>
			<text class="username">{{ userName }}</text>
		</view>

		<!-- 功能按钮 -->
		<view class="button-group">
			<view class="button-card" @click="navigateToEditUserInfo">
				<u-icon name="account" size="24" color="#55aa00"></u-icon>
				<text class="button-text">修改用户信息</text>
			</view>
			<view class="button-card" @click="navigateToEditPassword">
				<u-icon name="lock" size="24" color="#409EFF"></u-icon>
				<text class="button-text">修改密码</text>
			</view>
			<view class="button-card" @click="logout">
				<u-icon name="close" size="24" color="#F56C6C"></u-icon>
				<text class="button-text">退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: "", 
				fixedAvatar: "/static/userAvatar.svg", // 固定头像路径
			};
		},
		async onLoad() {
			this.loadUserInfo();
		},
		async onShow() {
			this.loadUserInfo();
		},
		methods: {
			async loadUserInfo() {
				await uni.request({
					url: `${this.$baseUrl}/user/getMessage`, // 反引号引用url
					method: 'POST',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('access_token') // 携带 Token，获取id
					},
				}).then(([err, res]) => {
					if (!err && res.data.data) {
						this.userName = res.data.data[0]["name"];
					} else {
						this.showPrompt("网络繁忙，请稍后重试");
					}
				});
			},
			navigateToEditPassword() {
				uni.navigateTo({
					url: "/pages/index/passwordEditing",
				});
			},
			navigateToEditUserInfo() {
				uni.navigateTo({
					url: "/pages/index/userInfoEditing",
				});	
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							uni.reLaunch({
								url: '/pages/index/login',
							});
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	.container {
		padding: 40rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.avatar-container {
		display: flex;
		justify-content: center;
		margin-top: 60rpx;
		margin-bottom: 40rpx;
	}

	.avatar {
		border: 4rpx solid #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		border-radius: 50%;
	}

	.username-container {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 60rpx;
	}

	.username-icon {
		margin-right: 16rpx;
	}

	.username {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.button-group {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.button-card {
		width: 90%;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 24rpx;
		cursor: pointer; // 鼠标悬浮样式
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		}
	}

	.button-text {
		font-size: 32rpx;
		margin-left: 20rpx;
		color: #333;
	}
</style>